<template>
	<view class="content font_family" v-if="detail">
		<view class="back" :style="{top:menuButtonInfo}" @click="back">
			<image src="../../static/public/back.png" mode=""></image>
		</view>
		<view class="top">
			<image :src="detail.ny_image" mode="widthFix"></image>
		</view>
		<view class="nr">
			<view class="title" :style="{backgroundColor:detail.ny_color}">
				{{detail.ny_desc}}
			</view>
			<view class="list" :style="{backgroundColor:detail.ny_color}" v-if="detail.goods.length>0">
				<view class="item f" v-for="(item,index) in detail.goods" :class="{item_b:index==detail.goods.length-1}"
					@click="go(`/pages/detail/detail?id=${item.id}`)">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="msg f_d f_z_b">
						<view class="sp_title text_ellipsis2">
							{{item.title}}
						</view>
						<view class="price f f_j f_z_b">
							<view class="left f">
								<view class="icon">
									￥
								</view>
								<view class="num">
									{{item.min_dl_price}}~{{item.max_dl_price}}
								</view>
							</view>
							<image @click.stop="item_add(item)" class="right" src="../../static/public/add_car.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加入购物车弹窗 -->
		<u-popup :show="add_show" :round="10" mode="center" @close="close" :safeAreaInsetBottom='false'
			closeOnClickOverlay>
			<view class="xg">
				<view class="msg f">
					<image :src="car_detail.image" mode="aspectFill"></image>
					<view class="right f_d f_z_b">
						<view class="title text_ellipsis2">
							{{car_detail.title}}
						</view>
						<view class="price">
							￥{{car_detail.multiplejson[gg_index].dl_price}}
						</view>
						<view class="gg f_z_b">
							<text>已选：{{car_detail.multiplejson[gg_index].title}}</text>
							<text>库存：{{car_detail.multiplejson[gg_index].inventory}}</text>
						</view>
					</view>
				</view>
				<view class="gg_box">
					<view class="gg_title f_z_b">
						<view class="">
							规格
						</view>
						<view class="add_btn f_j">
							<image src="../../static/public/jian_car.png" @click="jian" mode=""></image>
							<view class="nums">
								{{add_car.count}}
							</view>
							<image src="../../static/public/add_car.png" @click="add" mode=""></image>
						</view>
					</view>
					<view class="item_box f f_w">
						<view class="item" @click="check_gg(item,index)" :class="{item_check:index==gg_index}"
							v-for="(item,index) in car_detail.multiplejson" :key="index">
							{{item.title}}
						</view>
					</view>
					<!-- 价格 -->
					<view class="total f_j">
						<view class="hj">
							<text class="text">合计：</text>
							<text class="num">￥{{total_price.toFixed(1)}}</text>
						</view>
						<view class="btn" @click="join_car">
							加入购物车
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { theme_detail } from '@/api/page.js'
	import { joinCar } from '@/api/user.js'
	export default {
		computed: {
			...mapState(['dl_id', 'menuButtonInfo', 'car_num'])
		},
		data() {
			return {
				query_data: {
					id: '',
					dl: ''
				},
				detail: '',

				add_show: false,
				car_detail: '', //需要添加购物车的商品
				gg_index: 0,
				add_car: {
					goods_id: '',
					item_name: '',
					count: 1
				},
				gg_price: 0,
				total_price: 0
			}
		},
		onLoad(e) {
			this.query_data.dl = this.dl_id
			this.query_data.id = e.id
			this.get_detail()
		},
		methods: {
			...mapMutations(['set_car_num']),
			// 获取详情
			get_detail() {
				theme_detail(this.query_data).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					}
				})
			},
			// 添加购物车按钮
			item_add(item) {
				console.log(item)
				this.car_detail = item
				this.add_show = true
				this.gg_index = 0
				this.add_car.goods_id = item.id
				this.add_car.count = 1
				this.add_car.item_name = item.multiplejson[0].title
				this.hj()
			},
			close() {
				this.add_show = false
			},
			// 选择规格
			check_gg(item, index) {
				this.gg_index = index
				this.add_car.item_name = item.title
				this.add_car.count = 1
				this.hj()
			},
			// 数量加减
			jian() {
				if (this.add_car.count > 1) {
					this.add_car.count -= 1
					this.hj()
				}
			},
			add() {
				if (this.add_car.count >= this.car_detail.multiplejson[this.gg_index].inventory) {
					this.me_show_toast('库存不足')
				} else {
					this.add_car.count += 1
					this.hj()
				}

			},
			// 合计计算
			hj() {
				let price = this.car_detail.multiplejson[this.gg_index].dl_price * 1
				let num = this.add_car.count
				this.total_price = price * num
			},
			join_car() {
				joinCar(this.add_car).then(res => {
					if (res.code == 1) {
						// 改变购物车数量
						let num = this.car_num + 1
						this.set_car_num(num)
						this.add_show = false
					}
					this.me_show_toast(res.msg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		background: #FFEAB0;

		.back {
			position: absolute;
			left: 30rpx;
			z-index: 999999;

			image {
				width: 42rpx;
				height: 42rpx;
			}
		}

		.top {
			image {
				vertical-align: bottom;
				width: 100%;
				// height: 882rpx;
			}
		}

		.nr {
			padding: 30rpx;

			.title {
				border-radius: 15rpx;
				padding: 20rpx 34rpx;
				text-align: center;
				// background-color: #17AE4B;
				font-weight: 400;
				font-size: 54rpx;
				color: #FEF1C3;
			}

			.list {
				margin-top: 32rpx;
				padding: 22rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.item_b {
					margin-bottom: 0rpx !important;
				}

				.item {
					margin-bottom: 20rpx;
					padding: 20rpx;
					border-radius: 16rpx;
					background-color: #FFFFFF;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 16rpx;
					}

					.msg {
						flex: 1;
						margin-left: 20rpx;

						.sp_title {
							font-weight: 400;
							font-size: 36rpx;
							color: #3D3D3D;
						}

						.price {
							font-weight: 400;
							font-size: 34rpx;
							color: #E1222A;
							// align-items: flex-end;

							.left {
								align-items: flex-end;
							}

							.right {
								width: 40rpx;
								height: 40rpx;
							}

							.num {
								font-size: 44rpx;
							}
						}
					}
				}
			}
		}

		.xg {
			width: 650rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.msg {
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.right {
					flex: 1;
					margin-left: 15rpx;

					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #232323;
					}

					.price {
						font-weight: 400;
						font-size: 32rpx;
						color: #FF3767;
					}

					.gg {
						font-weight: 250;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.gg_box {
				.gg_title {
					margin-top: 40rpx;
					margin-bottom: 40rpx;
					font-weight: 250;
					font-size: 28rpx;
					color: #232323;

					.add_btn {
						.nums {
							text-align: center;
							width: 100rpx;
							font-weight: 250;
							font-size: 28rpx;
							color: #232323;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.item_box {
					.item {
						margin-right: 24rpx;
						margin-bottom: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #232323;
						padding: 14rpx 44rpx;
						background: rgba(35, 35, 35, 0.06);
						border-radius: 59rpx 59rpx 59rpx 59rpx;
					}

					.item_check {
						background: rgba(238, 65, 51, 0.1) !important;
						color: #EE4133 !important;
					}
				}

				.total {
					justify-content: flex-end;
					margin-top: 30rpx;

					.hj {
						font-weight: 250;
						font-size: 28rpx;
						color: #232323;

						.num {
							font-weight: 400;
							font-size: 34rpx;
							color: #FF3767;
						}
					}

					.btn {
						margin-left: 30rpx;
						padding: 18rpx 44rpx;
						background: #313132;
						border-radius: 35rpx 35rpx 35rpx 35rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>